import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_module/entities/CourseItemEn.dart';
import 'package:flutter_module/global/colors.dart';
import 'package:flutter_screenutil/screen_util.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //appBar: AppBar(
        //  backgroundColor: Colors.black26,
        //  title: Text('container'),
        //),
        body:MusicTab (),
      ),
    );
  }
}
class MusicTab extends StatefulWidget {
  MusicTab({Key key}) : super(key: key);

  @override
  _MusicTabState createState() {
    return _MusicTabState();
  }
}

class _MusicTabState extends State<MusicTab> {
  List<CourseItemEn>_techniqueData = [];
  CourseItemEn _courseItemEn, _courseItemEn1, _courseItemEn2, _courseItemEn3;
  bool _display=false;
  @override
  void initState() {
    _courseItemEn = new CourseItemEn(
        1,
'http://a1.qpic.cn/psc?/V54ETsN62Rdw772wFsNq0jEkXI4LU2rF/ruAMsa53pVQWN7FLK88i5qXdW5Uy62rKax8FCBWwXAbjsT5Nyc4R3bj6pKkmOlcrEPBVmPXupR7G.E9tkpzoBtOe7xuMP9bf847Zx*wm4q8!/c&ek=1&kp=1&pt=0&bo=BwIMAgcCDAIDEDU!&tl=1&vuin=2785784052&tm=1648994400&sce=60-2-2&rf=0-0',        "新的一天，新的时间",
        1,
        "6.36ETH",
        "https://img0.baidu.com/it/u=178892670,2966992691&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        "Vaenom");
    _courseItemEn1 = new CourseItemEn(
        1,
'http://a1.qpic.cn/psc?/V54ETsN62Rdw772wFsNq0jEkXI4LU2rF/ruAMsa53pVQWN7FLK88i5rnxAu50n5L6dP*97BmbqgqQncOagVX6W.J13HS527fDZ7QfvpbI8U24Qz8R7fFxRGa.DFCKQoU4xhFxlgmSukY!/c&ek=1&kp=1&pt=0&bo=iwKPAosCjwIDEDU!&tl=1&vuin=2785784052&tm=1648994400&sce=60-2-2&rf=0-0',        "有关生命的考量",
        1,
        "19.56BIT",
        "https://img2.baidu.com/it/u=1652427738,3139747163&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        "Half Soul Omega");
    _courseItemEn2 = new CourseItemEn(
        1,
'http://a1.qpic.cn/psc?/V54ETsN62Rdw772wFsNq0jEkXI4LU2rF/ruAMsa53pVQWN7FLK88i5qXdW5Uy62rKax8FCBWwXAYMNNtNOD.6s1Ze0qcS9R*Yd751z7z.TsSeNL.qYnxee0tlL3XH7ZI40zIPI9Y8698!/c&ek=1&kp=1&pt=0&bo=iQKLAokCiwIDEDU!&tl=1&vuin=2785784052&tm=1648994400&sce=60-2-2&rf=0-0',        "有关生命的考量",
        1,
        "11.98BIT",
        "https://img2.baidu.com/it/u=2391726625,2951775714&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        "0xd1c441");
    _courseItemEn3 = new CourseItemEn(
        1,
'http://a1.qpic.cn/psc?/V54ETsN62Rdw772wFsNq0jEkXI4LU2rF/ruAMsa53pVQWN7FLK88i5rnxAu50n5L6dP*97BmbqgpvIXEW2BxAUNgFk2NB2uJGs2nAKZGuntSY5qUOW2934JguVbv9cShNAr9IwJMI6vU!/c&ek=1&kp=1&pt=0&bo=gwKEAoMChAIDEDU!&tl=1&vuin=2785784052&tm=1648994400&sce=60-2-2&rf=0-0',        "街头霸王",
        1,
        "11.98BIT",
        "https://img0.baidu.com/it/u=4096999652,2870060546&fm=253&fmt=auto&app=138&f=JPEG?w=517&h=500",
        "mixedbyKelvin");
    _techniqueData.add(_courseItemEn);
    _techniqueData.add(_courseItemEn1);
    _techniqueData.add(_courseItemEn2);
    _techniqueData.add(_courseItemEn3);
    _loadData();
    super.initState();
  }

  void _loadData() async {
    EasyLoading.show(
      status: "Loading...",
      //duration: Duration(seconds: 2)
      //maskType: EasyLoadingMaskType.black,
    );
    await Future.delayed(Duration(milliseconds: 1000), () async {
      EasyLoading.dismiss();
      setState(() {
        _display=true;
      });
    });

  }
  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    ScreenUtil.init(
      BoxConstraints(
        maxWidth: MediaQuery.of(context).size.width,
        maxHeight: MediaQuery.of(context).size.height
      ),
      designSize: Size(1080,2340 ),
    );
    if(_display==true) {
      return SafeArea(
        child: Container(
          color: Color(0xff000B1F),
          child:Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Row(
                    children: [
                      Text(
                        '全部作品',
                        style:TextStyle(
                          fontSize: ScreenUtil().setSp(45),
                          color:Colors.white,
                        ),
                      ),
                      Icon(Icons.arrow_drop_down_rounded,color: AppColors.primary,size: 30,)
                    ],
                  ),
                  Row(
                    children: [
                      Text(
                        '音乐',
                        style:TextStyle(
                          fontSize: ScreenUtil().setSp(45),
                          color:Colors.white,
                        ),
                      ),
                      Icon(Icons.arrow_drop_down_rounded,color: AppColors.primary,size: 30,)
                    ],
                  ),
                  Row(
                    children: [
                      Text(
                        '价格',
                        style:TextStyle(
                          fontSize: ScreenUtil().setSp(45),
                          color:Colors.white,
                        ),
                      ),
                      Icon(Icons.arrow_drop_down_rounded,color: AppColors.primary,size: 30,)
                    ],
                  ),
                  Row(
                    children: [
                      Text(
                        '智能排序',
                        style:TextStyle(
                          fontSize: ScreenUtil().setSp(45),
                          color:Colors.white,
                        ),
                      ),
                      Icon(Icons.arrow_drop_down_rounded,color: AppColors.primary,size: 30,)
                    ],
                  ),
                ],
              ),
              Expanded(child: Container(
                padding: EdgeInsets.all(10),
                child: Wrap(
                  runSpacing: 10,
                  spacing: 10,
                  children: _techniqueData
                      .asMap()
                      .keys
                      .map((index) => _courseItemWidget(_techniqueData[index]))
                      .toList(),
                ),
              ),)
            ],
          ),
        ),
      );
    }else{
      return Container(
        width: 0,
        height: 0,
        color: AppColors.background,
      );
    }

  }
  Widget _courseItemWidget(CourseItemEn courseItemEn) {
    var itemWidth = (ScreenUtil().screenWidth - 30) / 2;

    return InkWell(
      onTap: () {
        Navigator.pushNamed(context, 'productDetail');
      },
      child: Container(
        width: itemWidth, //实现在wrap中平铺,高度自适应
        decoration: BoxDecoration(
          color: Color(0xff182643),
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              offset: Offset(-1, 1.0),
              blurRadius: 1.0,
              spreadRadius: 0.6,
            ),
          ],
          borderRadius: BorderRadius.all(Radius.circular(8)),
        ),
        child: Column(
          children: <Widget>[
            Container(
              width: double.infinity,
              child: AspectRatio(
                aspectRatio: 1 / 1, //防止服务器返回的图片高度不一致
                child: ClipRRect(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(8),
                    topRight: Radius.circular(8),
                  ),
                  child: Image.network(
                    courseItemEn.cover,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: ScreenUtil().setHeight(20),
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: Container(
                margin: EdgeInsets.fromLTRB(
                  ScreenUtil().setWidth(20),
                  ScreenUtil().setHeight(0),
                  ScreenUtil().setWidth(0),
                  ScreenUtil().setHeight(0),
                ),
                child: Text(
                  courseItemEn.name,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: Container(
                margin: EdgeInsets.fromLTRB(
                  ScreenUtil().setWidth(20),
                  ScreenUtil().setHeight(0),
                  ScreenUtil().setWidth(0),
                  ScreenUtil().setHeight(0),
                ),
                child: Text(
                  '${courseItemEn.price}',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                  top: ScreenUtil().setHeight(20),
                  bottom: ScreenUtil().setHeight(20)),
              child: Row(
                children: <Widget>[
                  Align(
                      alignment: Alignment.centerLeft,
                      child: Row(
                        children: [
                          SizedBox(
                            width: ScreenUtil().setWidth(20),
                          ),
                          ClipOval(
                            child: Image.network(courseItemEn.headImg,
                                width: ScreenUtil().setWidth(60),
                                height: ScreenUtil().setWidth(60),
                                fit: BoxFit.cover),
                          ),
                          Text(
                            courseItemEn.nickName,
                            style: TextStyle(
                              fontSize: 13,
                              color: Colors.white,
                            ),
                          )
                        ],
                      )),
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Image.asset(
                          'assets/images/music.png',
                          width: ScreenUtil().setHeight(70),
                          height: ScreenUtil().setHeight(50),
                          fit: BoxFit.fitHeight,
                        ),
                        SizedBox(
                          width: ScreenUtil().setWidth(30),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}